<template>
	<view class="olier">
		<u-form :model="form" ref="form1">
			<u-form-item label="车牌" label-width="200rpx" prop="plateNumber" ref="plateNumber">
				<u-input v-model="form.plateNumber" />
				<u-button @click="helperFn" type="primary" size="mini" :disabled="flag">搜索</u-button>
			</u-form-item>
			<u-form-item label="油量(单位:升)" label-width="200rpx" ref="oilMass" prop="oilMass">
				<u-input v-model="form.oilMass" />
			</u-form-item>
		</u-form>
		<view class="box">
		<u-button class="button" type="error"  @click="loginout">退出登录</u-button>
			<u-button class="button" type="primary" @click="debounceSubmit">提交</u-button>
		</view>
	</view>
	<u-select v-model="show" :list="list" @confirm="plateNumberConfirm"></u-select>
</template>

<script>
	// ,
	import {
		debounce
	} from "lodash"
	import { queryCar,oliAdd } from '@/api/index.js';
	export default {
		data() {
			return {
				show: false,
				list: [],
				form: {
					plateNumber: null, //车牌
					oilMass: null //油量
				},
				rules: {
					plateNumber: [{
							required: true,
							message: '请输入车牌',
							trigger: ['change', 'blur']
						},
						{
							pattern: /^([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[a-zA-Z](([DF]((?![IO])[a-zA-Z0-9](?![IO]))[0-9]{4})|([0-9]{5}[DF]))|[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1})$/,
							// 正则检验前先将值转为字符串
							transform(value) {
								return String(value);
							},
							trigger: ['change', 'blur'],
							message: '请输入正确车牌号'
						},
					],
					oilMass: [{
							required: true,
							message: '请输入油量',
							trigger: ['change', 'blur']
						},
						{
							pattern: /(^[1-9](\d+)?(\.\d{1,2})?$)|(^0$)|(^\d\.\d{1,2}$)/,
							// 正则检验前先将值转为字符串
							transform(value) {
								return String(value);
							},
							trigger: ['change', 'blur'],
							message: '油量为整数或者最多两位小数'
						},
					],
				},
				debounceSubmit: null
			};
		},


		onReady() {
			this.$refs.form1.setRules(this.rules);
		},
		onLoad() {
			this.debounceSubmit = debounce(this.submit, 2000)
		},
		computed: {
			// 一个计算属性的 getter
			flag() {
				// `this` 指向当前组件实例
				return this.form.plateNumber ? false  : true
			}
		},
		methods: {
			onSelect1(arr) {
				let current = arr[0];
				let value = current.value;
				this.select1.current = current;
				this.form.sex = value;
			},
			submit() {
				this.$refs.form1.validate((valid) => {
					if (valid) {
						uni.showToast({
							icon: "none",
							title: "表单验证通过"
						})
						//处理小数位
						this.form.oilMass = parseFloat(this.form.oilMass).toFixed(2);
						this.oliAddFn(this.form)
					}

				})

			},
			async oliAddFn(data){
				const olier_id = uni.getStorageSync('userID') || '';
				let res=await oliAdd(data.plateNumber,olier_id,data.oilMass)
				uni.showToast({
					icon: "none",
					title: res.msg,
				})
			},
			async helperFn() {
				//获取模糊查询车牌号
				let res= await queryCar(this.form.plateNumber)
				
				if(!res.length){
					//空数组
					uni.showToast({
						icon: "none",
						title: "无相关数据"
					})
					return
				}
				
				//更换选择器数据
				this.list=res.map((item)=>{
					return 	{
						value: item.car_id,
						label: item.car_id,
					}
				})
				//打开选择器
				this.show = true
			},
			plateNumberConfirm(e) {
				this.form.plateNumber = e[0].value

				//校验触发
				this.$refs['plateNumber'].onFieldChange()
				//关闭选择器
				this.show = false
			},
			 loginout ()  {
				uni.showModal({
					title: '提示',
					content: '确定要退出登录吗?',
					showCancel: true,
					success(res) {
						if (res.confirm) {
							uni.clearStorageSync()
							uni.navigateTo({
								url: '/pages/index/index'
							})
						}
					}
				})
			}
			
		}
	};
</script>


<style lang="scss">
	.olier {
		padding: 20rpx;
		display: flex;
		flex-direction: column;
		.box {
			margin-top: 40rpx;
			width: 100%;
			display: flex;
			.button {
			width: 40%;
			}
		}
		
	}
</style>